15-0 js
const App = {
data() {
return {
name: '小明',
isTransform: true,
num: 10,
event: 'click'
}
},
methods: {
// 轉換按鈕事件
changeClass() {
this.isTransform = !this.isTransform;
},
// 帶入參數事件
change(key) {
this[key] = !this[key];
},
onChange(evt) {
console.log('change事件',evt)
},
submitForm() {
console.log('表單已送出', `name 為 ${this.name}`)
},
dynamicEvent() {
console.log('這是一個動態事件', this.event)
},
down() {
console.log('按下');
},
up() {
console.log('放開');
},
double(n) {
return `NT$ ${n * 2}`;
},
}
};
Vue.createApp(App).mount('#app');
15-1 觸發事件 與 帶入參數
<div class="box" :class="{ rotate: isTransform }"></div>
<hr>
<!-- 綁定資料的值觸發changeclass事件 -->
<button class="btn btn-outline-primary" v-on:click="changeClass">選轉物件</button>
<!-- 使用change方法傳入參數執行事件 -->
<button class="btn btn-outline-primary" v-on:click="change('isTransform')">選轉物件</button>
15-2 input change 事件
<input type="text" @change="onChange">
15-3 form submit 事件
<!-- 原生Html事件按送出時會重新整理,預防此事件需加入修飾符.prevent -->
<!-- 不設定在按鈕即可觸發事件,可至直接鍵盤按enter亦可觸發 -->
<form @submit.prevent="submitForm">
<input type="text" v-model="name">
<button>送出表單</button>
</form>
15-4 動態事件 []
<input type="text" @[event]="dynamicEvent">
<input type="text" v-model="event">
15-5 動態物件方法 {}
<!-- 此方法無法傳入參數 -->
<button class="box" @="{
mousedown:down,
mouseup:up
}">
</button>
.
.
知識點來源:六角課程
以上是今天所提供知識點如有誤,再請務必在下面留言~